<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        {{form}}
        <br>
        用户名：<input type="text" value="username" v-model="form.username">
        <br>
        密码：<input type="password" v-model="form.password">
        <br>
        性别：
        <label>
            <input type="radio" value="male" v-model="form.gender">男
        </label>
        <label>
            <input type="radio" value="female" v-model="form.gender">女
        </label>
            
        <br>
        快递：
        <!-- label是将表单与文字绑定在一起 -->
        <label v-for="item in transports" :key="item.id">
            <input type="radio" :value="item.value" v-model="form.transport">{{item.name}}
        </label>
        <br>
        爱好：
        <!-- checkbos:复选框 -->
        <label>
            <input type="checkbox" value="basketball" v-model="form.hobby">篮球
        </label>
        <label>
            <input type="checkbox" value="swimming" v-model="form.hobby">游泳
        </label>
        <label>
            <input type="checkbox" value="dancing" v-model="form.hobby">跳舞
        </label>
        
        <br>
        籍贯：
        <!-- select：下拉列表 -->
        <select v-model="form.address">
            <option value="">请选择</option>
            <option value="fujian">福建</option>
            <option value="shanghai">上海</option>
            <option value="guangxi">广西</option>
        </select>
        <br>
        简介：
        <!-- textarea:文本域 -->
        <textarea cols="30" rows="10" v-model="form.info"></textarea>
        <br>
        <button @click="toSubmit">提交</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello',
                username:'zhangsan',
                transports:[{
                    id:1001,
                    name:'中通',
                    value:'zt'
                },{
                    id:1002,
                    name:'顺丰',
                    value:'sf'
                },{
                    id:1003,
                    name:'京东',
                    value:'jd'
                }],
                form:{
                    username:'zhangsan',
                    password:'',
                    gender:'',
                    transport:'',
                    hobby:[],
                    address:'',
                    info:'',
                },

            },
        
            methods:{
                toSubmit(){
                    console.log(this.form);
                    
                }
            }
        })   
    </script>

</body>
</html>